<html>
    <head>
        <title>Itowns - WFS (geojson) example</title>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="description">
            <p>Key bindings</p>
            <ul>
              <li>Left-Click: camera translation (drag)</li>
              <li>Right-Click: camera translation (pan)</li>
              <li>Ctrl + Left-Click: camera rotation (orbit)</li>
              <li>Spacebar / Wheel-Click: smart zoom</li>
              <li>Mouse Wheel: zoom in/out</li>
              <li>T: orient camera to a top view</li>
              <li>Y: move camera to start position</li>
            </ul>
            <br />
            <p><b>Information Batiment</b></p>
            <ul id="info"></ul>
        </div>
        <div id="viewerDiv"></div>
        <script src="../dist/itowns.js"></script>
        <script src="js/GUI/LoadingScreen.js"></script>
        <script type="text/javascript">
            // Define crs projection that we will use (taken from https://epsg.io/3946, Proj4js section)
            itowns.proj4.defs('EPSG:3946', '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
            /* global itowns,document, setupLoadingScreen, window */

            var extent;
            var viewerDiv;
            var view;
            var meshes;
            var p;
            var wmsImagerySource;
            var wmsImageryLayer;
            var rgb;
            var lyonTclBusSource;
            var color = new itowns.THREE.Color();

            // Define geographic extent: CRS, min/max X, min/max Y
            extent = new itowns.Extent(
                'EPSG:3946',
                1837816.94334, 1847692.32501,
                5170036.4587, 5178412.82698);

            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
            viewerDiv = document.getElementById('viewerDiv');

            const centerMap = new itowns.Coordinates('EPSG:3946', 1840839, 5172718, 0);

            // Instanciate PlanarView*
            view = new itowns.PlanarView(viewerDiv, extent, {
                placement: {
                    coord: centerMap,
                    heading: 45,
                    range: 1800,
                    tilt: 30,
                }
            });
            setupLoadingScreen(viewerDiv, view);

            wmsImagerySource = new itowns.WMSSource({
                url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
                networkOptions: { crossOrigin: 'anonymous' },
                version: '1.3.0',
                name: 'ortho_latest',
                crs: 'EPSG:3946',
                extent: extent,
                format: 'image/jpeg',
            });

            // Add a WMS imagery layer
            wmsImageryLayer = new itowns.ColorLayer('wms_imagery', {
                transparent: false,
                source: wmsImagerySource,
            });

            view.addLayer(wmsImageryLayer);

            // Add a WMS elevation source
            var wmsElevationSource = new itowns.WMSSource({
                extent: extent,
                url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
                name: 'MNT2018_Altitude_2m',
                crs: 'EPSG:3946',
                width: 256,
                format: 'image/jpeg',
            });

            // Add a WMS elevation layer
            var wmsElevationLayer = new itowns.ElevationLayer('wms_elevation', {
                useColorTextureElevation: true,
                colorTextureElevationMinZ: 144,
                colorTextureElevationMaxZ: 622,
                source: wmsElevationSource,
            });

            view.addLayer(wmsElevationLayer);

            var tile;
            var linesBus = [];

            function altitudeLine(properties, ctx) {
                var result;
                var z = 0;
                if (ctx.coordinates) {
                    result = itowns.DEMUtils.getTerrainObjectAt(view.tileLayer, ctx.coordinates, 0, tile);
                    if (!result) {
                        result = itowns.DEMUtils.getTerrainObjectAt(view.tileLayer, ctx.coordinates, 0);
                    }
                    if (result) {
                        tile = [result.tile];
                        z = result.coord.z;
                    }
                    return z + 5;
                }
            }

            function acceptFeatureBus(properties) {
                return properties.sens === "Aller";
            }

            lyonTclBusSource = new itowns.WFSSource({
                url: "https://data.grandlyon.com/geoserver/sytral/ows?",
                protocol: 'wfs',
                version: '2.0.0',
                id: 'tcl_bus',
                typeName: "tcl_sytral.tcllignebus_2_0_0",
                crs: 'EPSG:3946',
                extent: {
                    west: 1822174.60,
                    east: 1868247.07,
                    south: 5138876.75,
                    north: 5205890.19,
                },
                format: 'application/json',
            });

            const colorsLine = new Map();

            const colorLine = (properties) => {
                const line = properties.ligne;
                let color = colorsLine.get(line);
                if (color === undefined) {
                    color = new itowns.THREE.Color(0xffffff * Math.random());
                    colorsLine.set(line, color);
                }
                return colorsLine.get(line);
            }

            var lyonTclBusLayer = new itowns.FeatureGeometryLayer('lyon_tcl_bus', {
                filter: acceptFeatureBus,
                source: lyonTclBusSource,
                zoom: { min: 1 },

                style: {
                    stroke: {
                        base_altitude: altitudeLine,
                        color: colorLine,
                        width: 5,
                    }
                }
            });

            const lyonBusStopSource = new itowns.WFSSource({
                url: "https://data.grandlyon.com/geoserver/sytral/ows?",
                protocol: 'wfs',
                version: '2.0.0',
                id: 'pool',
                typeName: "sytral:tcl_sytral.tclarret",
                crs: 'EPSG:3946',
                extent,
                format: 'application/json',
            });

            var lyonBusStopLayer = new itowns.FeatureGeometryLayer('lyon_tcl_bus_stop', {
                source: lyonBusStopSource,
                zoom: { min: 4 },
                style: {
                    point: {
                        base_altitude: altitudeLine,
                        color: 'DarkTurquoise',
                        radius: 30,
                    }
                }
            });

            const orange = new itowns.THREE.Color(0xffa400);
            const blue = new itowns.THREE.Color(0x47edff);
            const black = new itowns.THREE.Color(0x000000);
            const red = new itowns.THREE.Color(0xff0000);

            function colorBuildings(properties, ctx) {
                const distance = ctx.coordinates.planarDistanceTo(centerMap);
                if (properties.usage_1 === 'Résidentiel') {
                    color.set(0xFDFDFF);
                } else if (properties.usage_1 === 'Annexe') {
                    color.set(0xC6C5B9);
                } else if (properties.usage_1 === 'Commercial et services') {
                    color.set(0x62929E);
                } else if (properties.usage_1 === 'Religieux') {
                    color.set(0x393D3F);
                } else if (properties.usage_1 === 'Sportif') {
                    color.set(0x546A7B);
                } else {
                    color.set(0x555555);
                }

                if (distance < 300) {
                    return blue;
                } else if (distance < 350){
                    return black;
                } else if (distance < 1000){
                    return color;
                } else if (distance < 1050){
                    return red;
                }
                return color.lerp(orange, Math.min(distance / 4000, 1.0));
            }


            function extrudeBuildings(properties) {
                return properties.hauteur;
            }

            function altitudeBuildings(properties) {
                return properties.altitude_minimale_sol;
            }

            function acceptFeature(properties) {
                return !!properties.hauteur;
            }

            var wfsBuildingSource = new itowns.WFSSource({
                url: 'https://data.geopf.fr/wfs/ows?',
                version: '2.0.0',
                typeName: 'BDTOPO_V3:batiment',
                crs: 'EPSG:4326',
                ipr: 'IGN',
                format: 'application/json',
                extent: {
                    west: 4.568,
                    east: 5.18,
                    south: 45.437,
                    north: 46.03,
                },
            });

            var wfsBuildingLayer = new itowns.FeatureGeometryLayer('wfsBuilding', {
                batchId: function (property, featureId) { return featureId; },
                filter: acceptFeature,
                crs: 'EPSG:3946',
                source: wfsBuildingSource,
                zoom: { min: 4 },

                style: {
                    fill: {
                        color: colorBuildings,
                        base_altitude: altitudeBuildings,
                        extrusion_height: extrudeBuildings,
                    }
                }
            });

            view.addLayer(wfsBuildingLayer);

            var wfsCartoSource = new itowns.WFSSource({
                url: 'https://data.geopf.fr/wfs/ows?',
                version: '2.0.0',
                typeName: 'BDCARTO_V5:zone_d_habitation',
                crs: 'EPSG:3946',
                ipr: 'IGN',
                format: 'application/json',
            });

            var wfsCartoStyle = {
                zoom: { min: 0, max: 20 },
                text: {
                    field: '{toponyme}',
                    color: (p) => {
                        switch (p.nature) {
                            case 'Quartier':
                                return 'WhiteSmoke';
                            case 'Château':
                                return 'Cornsilk';
                            case 'Lieu-dit habité':
                            default:
                                return 'white';
                        }
                    },
                    transform: 'uppercase',
                    size: (p) => {
                        switch (p.nature) {
                            case 'Quartier':
                                return 13;
                            case 'Château':
                                return 11;
                            case 'Lieu-dit habité':
                            default:
                                return 18;
                        }
                    },
                    haloColor: 'rgba(20,20,20, 0.8)',
                    haloWidth: 3,
                },
            };

            var wfsCartoLayer = new itowns.LabelLayer('wfsCarto', {
                source: wfsCartoSource,
                style: wfsCartoStyle,
            });

            view.addLayer(wfsCartoLayer);

            function picking(event) {
                var htmlInfo = document.getElementById('info');
                var intersects = view.pickObjectsAt(event, 2, 'wfsBuilding');
                var properties;
                var info;
                var batchId;
                htmlInfo.innerHTML = ' ';

                if (intersects.length) {
                    batchId = intersects[0].object.geometry.attributes.batchId.array[intersects[0].face.a];
                    properties = intersects[0].object.feature.geometries[batchId].properties;
                    Object.keys(properties).map(function (objectKey) {
                        var value = properties[objectKey];
                        if (value) {
                            var key = objectKey.toString();
                            if (key[0] !== '_' && key !== 'geometry_name') {
                                info = value.toString();
                                htmlInfo.innerHTML +='<li><b>' + key + ': </b>' + info + '</li>';
                            }
                        }
                    });
                    return properties;
                }
            }

            // Wait for globe initialization since we are using the elevation
            // layer to calculate the base altitude of both feature layers.
            // See the function `altitudeLine` above.
            view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function m() {
                view.addLayer(lyonTclBusLayer);
                view.addLayer(lyonBusStopLayer);
            });

            window.addEventListener('mousemove', picking, false);
        </script>
    </body>
</html>
